<template>
    <div class="wrap" >
          <wxc-minibar class="border-bottom" title="资讯"   >
            
            </wxc-minibar>
            <wxc-tab-page ref="wxc-tab-page" :tab-titles="tabTitles" title-type="text" :tab-styles="tabStyles" :tab-page-height="tabPageHeight" @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
             <list v-for="(v,index) in tabList" :key="index" class="item-container" :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
            <!-- <cell class="border-cell"></cell> -->
                <refresh @refresh="onrefresh" class="refresh" :display="refreshing ? 'show' : 'hide'">
                    <rotate></rotate>
                    <!-- <text style="font-size:28px;">数据加载中。。。</text>
                    <loading-indicator class="indicator"></loading-indicator> -->
                </refresh>
                <cell v-for="(item,key) in v" v-if="v&&v.length>0" class="cell" :key="key">
                           <div class="msglist-wrap">
                            <div class="list" @click="getView(item.url,item.no)">
                                <div class="list-left">
                                    <image class="icon" :src="item.thumbnail || 'https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/consultMo.png'"></image>
                                </div>
                                <div class="list-right">
                                    <div class="list-txtTop">
                                        <text class="title-txt">{{item.title}}</text>
                                    </div>
                                    <div class="list-txtBot">
                                        <div class="bot-wrap1">
                                            <image class="eye" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/eye.png"></image>
                                        </div>
                                        <div class="bot-wrap2">
                                            <text class="graytxt">{{item.view}}</text>
                                        </div>
                                        <div class="bot-wrap3">
                                            <text class="graytxt txtr">{{item.createTime | filtertime}}</text>
                                        </div>
                                    </div>
                                </div>
                            </div>
                     </div>
                </cell>
                <cell v-if="norecord" class="norecord">
                    <image style="width:298.5px;height:298.5px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/nobatrecord.png"></image>
                    <text style="margin-top:71.7px;font-size: 40px;color: #9E8383;">暂无资讯</text>
                </cell>
                <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'" v-if="!notLoding">
                    <rotate></rotate>
                    <!-- <loading-indicator class="indicator"></loading-indicator> -->
                </loading>
             </list>
         </wxc-tab-page>
          <loading-big v-if="loadingshow"></loading-big>
        <!-- <wxc-loadingsp :show="loadingshow" type="custom" :need-mask="true" loading-text="加载中..." m-url="http://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif" m-width="200" m-height="200" m-backgroundcolor="#212021" m-textcolor="#ffffff">
        </wxc-loadingsp> -->
    </div>
</template>

<script>
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import {
    WxcTabPage,

    Utils,
    BindEnv
} from "weex-ui";
import Config from "@/tab-bar/topconfig";
import WxcLoadingsp from "@/components/modules/loading";
import rotate from "@/components/modules/rotate";
import loadingBig from "@/components/modules/loading-big";
let modal = weex.requireModule("modal");
import {
    serialize,
    getBaseUrl
} from "@/utils/index.js";
import {
    GetResponsesNotToken

} from "@/api.js";
let navigator = weex.requireModule("navigator");
export default {
       components: {
              WxcTabPage,
              WxcMinibar,
              WxcLoadingsp,
              rotate,
              loadingBig
       },
      data(){
          return{
            tabTitles:[],
            tabPageHeight:1334,
            tabStyles: Config.tabStyles,
             tabList: [],
            tabTagIndex:[],//用来存后台给的标签号
            loadingshow: false,
            refreshing: false,
            loadinging: false,
            notLoding:false,
            norecord: false,
            pagesize: 10, // 一页显示多少条
            pageindex: 1, //当前页
            baseURL: "",
            tabFlag:null,//用来标识导航
            index:0,
        
          }
      },
       filters:{
         filtertime: function (dateTimeStamp) {
             let result;
           var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var halfamonth = day * 15;
            var month = day * 30;
            var now = new Date().getTime();
            var diffValue = now - dateTimeStamp;
            if(diffValue < 0){return;}
            var monthC =diffValue/month;
            var weekC =diffValue/(7*day);
            var dayC =diffValue/day;
            var hourC =diffValue/hour;
            var minC =diffValue/minute;
            if(monthC>=1){
                result="" + parseInt(monthC) + "月前";
            }
            else if(weekC>=1){
                result="" + parseInt(weekC) + "周前";
            }
            else if(dayC>=1){
                result=""+ parseInt(dayC) +"天前";
            }
            else if(hourC>=1){
                result=""+ parseInt(hourC) +"小时前";
            }
            else if(minC>=1){
                result=""+ parseInt(minC) +"分钟前";
            }else
            result="刚刚";
            return result;

        }
    },
      created(){
          this.getTags();
          
        
      },
       mounted(){
         this.tabPageHeight = Utils.env.getPageHeight();
        // 获取路径
        this.baseURL = getBaseUrl(weex.config.bundleUrl, true);
    },

    methods:{
        //获取标签页
        async getTags(){
              let param = {
                position:"NEWS",
                current: "0",//当前页面
                size: "10",//分页大小，一页展示多少条
            };
              let res = await GetResponsesNotToken('trend/v1/tags',param);//发请求
              if(res.data && res.data.length>0){
                  //modal.toast({message:JSON.stringify(res.data)});
                  res.data.forEach((element,index) => {
                    this.tabTagIndex.push(element.no);//标签的序号
                     this.tabTitles.push({title:element.name});
                  });
              }
              this.tabFlag = this.tabTagIndex[0];//页面首次加载，第一个标签
              //console.log(JSON.stringify([...Array(this.tabTitles.length).keys()]));
              this.tabList= [...Array(this.tabTitles.length).keys()].map(i => []);
              //获取资讯列表
              this.getresposnedata(true);
              
        },
        //点击使用到首页
        goHome(){
              navigator.push({
                url: this.baseURL + "index.js",
                animated: "true"
            });
        },
        
        //请求阅读量
           async getView(url,tabNum) {
               let param={
                 appType:"GOUCAI",
               }
              let res = await GetResponsesNotToken('trend/v1/news/'+tabNum+'/view', param); 
             this.hrefNewPage(url,res.data);

            
        },
        //请求资讯列表页数据
          async getresposnedata(state) {
            this.loadingshow = true
            this.refreshing = true
            let param = {
                appType:"GOUCAI",
                current: this.pageindex,//当前页面
                size: this.pagesize,//分页大小，一页展示多少条
            };

            try {
                let res = await GetResponsesNotToken('trend/v1/news/tagNo/'+this.tabFlag, param); 
                this.loadingshow = false;
                if (res.data.length === 0) {
                    this.norecord = true
                } else {
                    this.norecord = false;
                }

                if (this.pageindex !== 1) this.norecord = false;
                let demoList = res.data;
                let key = !!state ? demoList : !Array.isArray(this.tabList[this.index]) ? [] :this.tabList[this.index].concat(demoList);
                this.$set(this.tabList, this.index, key);
                this.refreshing = false
                this.loadinging = false
                this.notLoding = demoList.length < this.pagesize 

            } catch (e) {
                this.loadingshow = false
            }
        },
     
        onrefresh(event) {
            this.pageindex = 1
            this.getresposnedata(true)

        },

        onloading(event) {
            if( !!this.notLoding) return 
            this.loadinging = true
            this.pageindex++
            this.getresposnedata()

        },
        wxcTabPageCurrentTabSelected(e) {
               
            this.index = e.page;
            this.tabFlag=this.tabTagIndex[e.page];
            this.pageindex = 1;
            this.getresposnedata(true);
        },
        hrefNewPage(url,view){
        let baseurl =  getBaseUrl(weex.config.bundleUrl, true);
        let urlParmas = {
          url: url,
          view:view
        }
        let jUrl = baseurl + `views/webview/conview_webview.js?` + serialize(urlParmas);
        let params = {
          url: jUrl,
          animated: "true"
        };
        navigator.push(params);
        return;
        }
 
    }
}
</script>

<style scoped>
.item-container{
    width:750px;
    margin-top:24px;
    /* background-color: #fff; */
}
.loading{
    width: 750px;
    display: flex;
    align-items: center;
   
}
.refresh {
    width: 750px;
    display: flex;
    align-items: center;
}
.norecord {
    padding-top: 158px;
    padding-left: 225.8px;
    padding-right: 225.8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wrap{
    background-color: #F5F5F5;
    
    
}
    .msglist-wrap{
       
         height:160px;
         padding-top:20px;
         padding-bottom:20px;
          background-color: #fff;
        
    }
    .list{
        flex-direction: row;
     

    }
    .list-left{
        width:244px;
        align-items: center;
       height:120px;
        
    }
    .list-right{
       
        flex-direction: column;
     width:506px;
     padding-right:30px;
      
       
    }
    .list-txtright{
        padding-top:40px;
    }
    .list-txtLeft{
       width:500px;
    }
    .icon{
        width:180px;
        height:120px;
         border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        text-align: center;
      
        
    }

    .list-txtBot{
        flex-direction: row;
        margin-top:38px;
        height:50px;
        align-items: center;
    }
    .title-txt{
        font-size:28px;
        color:#333333;
       
        lines:1;
        /* overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1; */
    }
    .graytxt{
        color:#999999;
        font-size:24px;
    }
    .subtitle-txt{
        padding-top:16px;
    }
  .eye{
      width:35px;
      height:26px;
  }
  .bot-wrap1{
      padding-left:220px;
  }
  .bot-wrap2{
      padding-left:10px;
      width:100px;
      /* flex:1; */
     
  }
    .bot-wrap3{
      /* flex:2; */
      padding-left:10px;
   
  }
  .txtr{
      width:110px;
      text-align: right;
  }

</style>